<template>
  <el-container>
    <el-header id="header" height="70px">
      <Header></Header>
    </el-header>
    <el-container >
      <el-aside width="200px"  class="nav">
        <Nav></Nav>
      </el-aside>
      <el-main id="main">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
    import Header from "./head/Header";
    import Nav from "./head/Nav";
    export default {
        name: "Main",
      components: {Nav, Header}
    }
</script>

<style scoped>
#header{
  background-color: rgb(36, 47, 66);
  color: white;
  font-size: 24px;
}
.nav {
  background-color: rgb(50, 65, 87);
}
#main{
  background-color:  rgb(240,240,240);
}
.el-container {
  height: 100%;
}
</style>
